<script setup lang="ts">
import { computed, ref } from 'vue';
import { App } from 'ant-design-vue';
import { useSect } from '../../../composables';
import { REWARD_TYPE } from '../../../game/model/reward/type';
import { EVENTS, GameKernel } from '../../../game';
import { formatSecondsStrictWithPadding } from '../../../utils';
import SectInfo from './sect-info.vue';

const emit = defineEmits<{
  (e: 'change-scene', id: string): void;
}>();

const { modal } = App.useApp();

const { state: sectState } = useSect();

const activeKey = ref('normal');

const currentSectInfo = computed(() => {
  return sectState.value.sectList.find(
    (item) => item.config.id === sectState.value.currentSect
  );
});

const sectHangUpTaskList = computed(() => {
  return sectState.value.sectHangUpTaskList;
});

const sectNormalTaskList = computed(() => {
  return sectState.value.sectNormalTaskList;
});

const currentHangUpTask = computed(() => {
  return sectState.value.currentHangUpTask;
});

function onBackClick() {
  emit('change-scene', 'sect-main');
}

function onStartHangUpTaskClick(id: string) {
  if (currentHangUpTask.value) {
    const currentTaskName = currentHangUpTask.value.config.name;
    modal.confirm({
      title: '提示',
      content: `正在进行 [${currentTaskName}] 任务，确定要更换任务吗？`,
      okText: '确定',
      cancelText: '取消',
      centered: true,
      onOk: () => {
        GameKernel.inst.bus.emit(EVENTS.SECT_HANG_UP_TASK_START, id);
        GameKernel.inst.bus.emit(EVENTS.SECT_HANG_UP_TASK_RESET_PROGRESS);
      },
    });
  } else {
    GameKernel.inst.bus.emit(EVENTS.SECT_HANG_UP_TASK_START, id);
  }
}
</script>

<template>
  <div v-if="currentSectInfo" class="w-full h-full flex flex-col">
    <div class="flex-none py-2 text-lg font-bold text-center relative">
      <div class="absolute left-2 top-1/2 transform -translate-y-1/2">
        <a-button @click="onBackClick">返回</a-button>
      </div>
      <div>{{ currentSectInfo.config.name }} - 执事堂</div>
    </div>
    <div class="flex-none border-0 border-t border-solid border-border p-2">
      <sect-info></sect-info>
    </div>
    <div class="sect-task flex-1 overflow-auto">
      <a-tabs v-model:activeKey="activeKey" :centered="true">
        <a-tab-pane key="normal" tab="悬赏任务">
          <div class="h-full overflow-auto p-2 flex flex-col gap-2">
            <a-card v-for="item in sectNormalTaskList" :key="item.config.id">
              <div class="text-lg font-bold">{{ item.config.name }}</div>
              <div class="text-gray-400">{{ item.config.description }}</div>
              <div class="flex">
                <div class="flex-none">要求：</div>
                <div class="flex-1">
                  <div
                    v-for="(condition, conditionIndex) in item.config
                      .receiveConditions"
                    :key="conditionIndex"
                  >
                    {{ condition.description }}
                  </div>
                </div>
              </div>
              <div class="flex">
                <div class="flex-none">奖励：</div>
                <div class="flex-1">
                  <div
                    v-for="(reward, rewardIndex) in item.config.baseReward"
                    :key="rewardIndex"
                  >
                    <div v-if="reward.type === REWARD_TYPE.SECT_CONTRIBUTION">
                      {{ reward.name }} +{{ reward.quantity }}
                    </div>
                    <div v-else-if="reward.type === REWARD_TYPE.SPIRIT_STONE">
                      {{ reward.name }} +{{ reward.quantity }}
                    </div>
                  </div>
                </div>
              </div>
            </a-card>
            <a-card v-if="sectNormalTaskList.length === 0">
              <div class="text-center">无</div>
            </a-card>
          </div>
        </a-tab-pane>
        <a-tab-pane key="hang-up" tab="宗门日常" force-render>
          <div class="h-full overflow-auto p-2 flex flex-col gap-2">
            <a-card v-for="item in sectHangUpTaskList" :key="item.config.id">
              <div class="text-lg font-bold">{{ item.config.name }}</div>
              <div class="text-gray-400">{{ item.config.description }}</div>
              <div class="flex">
                <div class="flex-none">要求：</div>
                <div class="flex-1">
                  <div
                    v-for="(condition, conditionIndex) in item.config
                      .receiveConditions"
                    :key="conditionIndex"
                  >
                    {{ condition.description }}
                  </div>
                </div>
              </div>
              <div class="flex">
                <div class="flex-none">奖励：</div>
                <div class="flex-1">
                  <div
                    v-for="(reward, rewardIndex) in item.config.baseReward"
                    :key="rewardIndex"
                  >
                    <div v-if="reward.type === REWARD_TYPE.SECT_CONTRIBUTION">
                      {{ reward.name }} +{{ reward.quantity }}
                    </div>
                    <div v-else-if="reward.type === REWARD_TYPE.SPIRIT_STONE">
                      {{ reward.name }} +{{ reward.quantity }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="pt-2 flex justify-end">
                <a-button
                  v-if="
                    !!currentHangUpTask &&
                    currentHangUpTask.config.id === item.config.id
                  "
                  :disabled="true"
                  :loading="true"
                >
                  {{
                    formatSecondsStrictWithPadding(
                      sectState.hangUpTaskProgressLeftTime
                    )
                  }}后获得奖励
                </a-button>
                <a-button
                  v-else
                  :disabled="!item.canReceive"
                  @click="onStartHangUpTaskClick(item.config.id)"
                >
                  {{ item.canReceive ? '开始' : '不满足要求' }}
                </a-button>
              </div>
            </a-card>
            <a-card v-if="sectHangUpTaskList.length === 0">
              <div class="text-center">无</div>
            </a-card>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<style scoped>
.sect-task :deep(.ant-tabs),
.sect-task :deep(.ant-tabs-content) {
  height: 100%;
}
.sect-task :deep(.ant-tabs-nav) {
  margin-bottom: 0;
}
.sect-task :deep(.ant-card-body) {
  padding: 16px;
}
</style>
